<template>
  <h1>hello vue3</h1>
  <ul>
    <!-- 
      路由跳转两种方式：
        1. 声明式导航
          <router-link to="/xxx">xxx</router-link>

        2. 编程式导航
          import { useRouter } from "vue-router";
          const router = useRouter();
          router.push("/xxx");

        如果在路由跳转的时候要做一些其他事情，就用编程式导航
        如果只需要直接路由跳转，用声明式导航

      路由传参的方式：
        1. query

        2. params

        3. meta

     -->
    <!-- 声明式导航 -->
    <!-- <li><router-link to="/home?name=jack&age=18">Home</router-link></li> -->
    <!-- <li>
      <router-link :to="{ path: '/home', query: { name: 'jack', age: 18 } }">
        Home
      </router-link>
    </li> -->
    <li>
      <!-- 注意：需要在路由配置中取名字 -->
      <router-link :to="{ name: 'Home', query: { name: 'jack', age: 18 } }">
        Home
      </router-link>
    </li>
    <!-- 编程式导航 -->
    <li><a @click="goAbout">About</a></li>
    <li><router-link to="/detail/123">Detail</router-link></li>
    <li>
      <!-- 注意：用对象形式，必须使用命名路由 -->
      <router-link
        :to="{
          name: 'Detail',
          params: {
            id: 123,
          },
        }"
      >
        Detail
      </router-link>
    </li>
  </ul>
  <!-- 加载并渲染路由组件 -->

  <!-- transition只能决定单个元素的过渡效果，所以路由组件需要根标签 -->
  <!-- 
      router-view不传入插槽，就会渲染对应的路由组件 
      传入了插槽，就会渲染插槽内容

      同时，router-view通过作用域插槽将当前匹配上的路由组件传入 Component
    -->
  <!-- vue3 component动态组件，本身不渲染，is的值是啥就渲染啥 -->
  <router-view v-slot="{ Component }">
    <transition name="fade">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </transition>
  </router-view>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";

const router = useRouter();

const goAbout = () => {
  // router.push("/about?name=jack&age=18");
  // router.push({
  //   path: "/about",
  //   query: { name: "jack", age: 18 },
  // });
  router.push({
    name: "About",
    query: { name: "jack", age: 18 },
  });
};
</script>

<style scoped>
/*
  vue2 transition默认添加的类名:
    v-enter
    v-enter-active
    v-enter-to

    v-leave
    v-leave-active
    v-leave-to

  vue3 transition默认添加的类名:
    隐藏到显示
      v-enter-from
      v-enter-active
      v-enter-to
      
    显示到隐藏：
      v-leave-from
      v-leave-active
      v-leave-to
*/
.fade-enter-from {
  transform: translateX(100px);
  opacity: 0;
}

.fade-enter-active {
  /* transition: all 1s; */
  transition: transform 1s, opacity 1s;
}

.fade-enter-to {
  transform: translateX(0);
  opacity: 1;
}
</style>
